@import './element-variables';
@import './epm-variables';


/* 非官方element组件和页面中的DOM模板
   ----------------
   | versions.1.7 |
   | 2019/08/06   |
   | EPM体验设计部  |
   ----------------

   1. 除ElementUI组件外以模块为单位的样式定义;
   2. 类名以template词缀开头与ElementUI组件和其他个性化功能区分;
   3. 每项模板增加了DOM结构;
   4. 工具适用于所有项目或各功能;
--------------------------------------------------------------*/

/* 初始化定义图标等html标签
-----------------------------*/
* {
  margin: 0;
  padding: 0;
}

li,
ul {
  list-style: none;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}


/* 初始化定义全局滚动条 (支持webkeit内核浏览器)
--------------------------------------------- */
::-webkit-scrollbar {
  background-color: #e7e8ed;
  width: 8px;
  height: 8px;
  -webkit-transition: opacity 340ms ease-out;
  transition: opacity 340ms ease-out;

  &:hover,
  &:active {
    background-color: #e7e8ed;
  }
}

::-webkit-scrollbar-thumb {
  background-color: #b5b9ca;
  border: 1px solid #e7e8ed;
  -webkit-transition: .3s background-color;
  transition: .3s background-color;
  background-clip: padding-box;
  min-height: 15px;
  border-radius: 2px;

  &:hover,
  &:active {
    background-color: #9194a2;
  }
}

::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}

::-webkit-scrollbar-track {
  background-clip: padding-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}


/* 工具
------------------------------*/

// 文本颜色 （适用范围：覆盖全部界面中特殊颜色的文本）
.template-font-color-primary {
  color: $--color-primary;
}

.template-font-color-warning {
  color: $--color-warning;
}

.template-font-color-success {
  color: $--color-success-1;
}

.template-font-color-danger {
  color: $--color-danger;
}

// el-button组件为text类型且有功能颜色区分的 （适用范围：表格内操作列及个性化或非UI规则使用）
.template-button-text-info {
  color: $--color-template-button-text-primary;

  &:focus,
  &:hover {
    color: $--color-template-button-text-primary;
  }
}

.template-button-text-primary {
  color: $--color-primary;
}

.template-button-text-success {
  color: $--color-success-1;

  &:focus,
  &:hover {
    color: $--color-success-1;
  }
}

.template-button-text-warning {
  color: $--color-warning;
}

.template-button-text-danger {
  color: $--color-danger;

  &:focus,
  &:hover {
    color: $--color-danger;
  }
}

.template-text-info {
  color: $--color-text-secondary;
}

// 文本对齐方式 （适用范围：个性化或非UI规则对齐方式使用）
.text-right {
  text-align: right !important
}

.text-center {
  text-align: center !important;
}


/* 查询表格界面模板 ( 从UI设计规范来分析主要包括：头部 | 主体容器 )

<div class="template-table-list-wrapper">
    <div class="template-table-list-header">
        <!-- 查询表格顶部 -->
    </div>
    <div class="template-table-list-body">
        <!-- 查询表格主体 -->
    </div>
</div>
------------------------------------------- */
.template-table-list-wrapper {
  position: relative;
  padding: 20px;

  // 查询列表-查询列表头部 ( 从UI设计规范来分析主要包括：标题 | 视图切换 )
  .template-table-list-header {
    //display: flex;
    margin-bottom: 20px;

    // 标题为默认h3标签
    h3 {
      margin: 0;
      color: $--color-template-button-text-primary;
      font-weight: normal;
      font-size: 18px;
      display: inline-block;
    }

    // 控制切换视图功能在右侧
    .template-switch-view-group {
      margin-left: auto;
    }
  }

  // 查询列表-主体 （ 从UI设计规范来分析主要包括：工具栏 | 表格 | 分页 ）
  .template-table-list-body {
    box-sizing: border-box;
    //height: calc(100vh - 86px - 95px); // 此高度跟随门户菜单形式调整
    border: 1px solid $--border-color-light;
    border-radius: 4px;
    background-color: $--color-white;

    .left-sidebar {
      float: left;
      height: 100%;
      border-right: 1px solid $--border-color-light;
    }

    .right-table {
      padding: 20px;
      height: 100%;
      box-sizing: border-box;
    }

    &.small {
      height: calc(100vh - 238px);
    }
  }
}


/* 查询列表-切换视图 (非ElementUI官方Radio.Group组件)

<div class="template-switch-view-group">
    <el-tooltip content="列表"  placement="bottom-end">
      <el-button>
        <i class="iconfont"></i>
      </el-button>
    </el-tooltip>
    <el-tooltip content="平铺" placement="bottom-end">
      <el-button>
        <i class="iconfont"></i>
      </el-button>
    </el-tooltip>
</div>
---------------------------------------------------------*/
.template-switch-view-group {
  .el-button {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 24px;
    width: 31px;
    min-width: unset;
    border-radius: 4px;
    text-align: center;

    &:first-child {
      margin-left: -5px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      margin-left: -5px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .orange-item,
  .green-item {
    i {
      color: $--color-white;
    }
  }

  .orange-item {
    background: $--color-warning;
    border: 1px solid transparent;
  }

  .green-item {
    border: 1px solid transparent;
    background: $--color-success;
  }
}


/* 查询列表-工具栏 （ 从UI设计规范来分析主要包括：操作按钮组 | 筛选 | 查询 | 高级查询弹层 , 其中操作按钮组和查询表单在custom-components中已定义 ）

<div class="template-toolbar-group">
  <div class="item-left">
  </div>
  <div class="item-right">
  </div>
</div>
------------------------------------*/
.template-toolbar-group {
  display: flex;
  align-items: flex-end;
  padding: 20px 0;
  position: relative;

  .item-left {
    width: inherit;
  }

  .item-right {
    margin-left: auto;
  }
}

/* 高级查询 （默认为4列，内部每项采用栅格化布局并且兼容1366px*768px分辨率）

<div class="template-advanced-query">
  <dl class="template-advanced-query__explicit">
    <dt>异业权益：</dt>
    <dd>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
      </el-select>
    </dd>
    <dt>权益状态：</dt>
    <dd>
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
      </el-select>
    </dd>
    <dd>
      <el-input placeholder="请输入权益名称" v-model="input">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </dd>
    <dd>
      <el-button class="template-advanced-query__toggle" type="text" @click="togglePopupAdvancedQuery()">{{isOpenAdvancedQuery?"收起":"更多"}}</el-button>
      <transition name="el-zoom-in-top">
        <div class="template-advanced-query__popup" v-show="isOpenAdvancedQuery">
          <el-row :gutter="20">
            <el-col :span="4" />
            <el-col :span="6">
              <label>权益合作方：</label>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <label>权益类型：</label>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <label>有效日期：</label>
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
              <span class="date-split">-</span>
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
            </el-col>
          </el-row>
          <div class="is-button-group">
            <el-button class="el-button--danger" @click="cancel">取消</el-button>
            <el-button type="primary" @click="search">确定</el-button>
            <el-button type="primary" plain @click="reset">重置</el-button>
          </div>
        </div>
      </transition>
    </dd>
  </dl>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------- */
.template-advanced-query {
  margin: 0 0 0 30px;
  padding: 0;
  line-height: 30px;
  font-size: $--font-size-extra-small;

  &.vertical {
    // 纵向排版中使用
    display: flex;
    margin: 0 0 10px 0;
  }

  dt {
    margin: 0 -14px 0 20px;
    color: $--color-template-button-text-primary;
  }

  dd {
    margin: 0 0 0 20px;
  }

  a {
    // 每项的索引状态
    color: $--color-blue-light-3;
    text-decoration: none;

    &:hover,
    &.is-active {
      padding-bottom: 8px;
      border-radius: 0;
      border-bottom: 1px solid $--color-primary;
      color: $--color-primary
    }
  }

  &__explicit {
    display: inline-flex;
    margin: 0;
  }

  &__toggle {
    &.el-button--small {
      min-width: unset;
    }
  }

  &__popup {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 20px;
    background-color: $--color-white;
    border-top: 1px solid $--border-color-base;
    border-bottom: 1px solid $--border-color-base;
    box-shadow: 0 2px 3px rgba($color: $--color-black, $alpha: .05);

    .el-col {
      display: inline-flex;
      margin-bottom: 20px;

      label {
        padding-right: 6px;
        white-space: nowrap;
        min-width: 90px;
        text-align: right;
        color: $--color-text-grade-1;
      }
    }

    .is-button-group {
      padding-top: 20px;
      border-top: 1px solid $--border-color-base;
      text-align: right;
    }
  }
}


/* 卡片列表模板

<div class="template-card-list-wrapper">
  <ul class="template-card-list-body">
    <li :class="{empty:index==0}">
      <template v-if="index==0">
        <a href="javascript:void(0)">
          <div class="item-info">
            <span>
              <svg class="icon" aria-hidden="true"><use xlink:href="#icon-add"></use></svg>
            </span>
            创建页面
          </div>
        </a>
      </template>
      <template>
        <div class="item-info">
          <span class="lower-shelf">已使用</span>
          <span class="upper-shelf">未使用</span>
          <img src="./assets/questionnaire/temp.png" v-else>
          <div class="list-item-bom">
            <p>{{page.nest_page_name}}</p>
            <span class="approval-wait">待审批</span>
            <span class="approval-pass">审批通过</span>
            <span class="approval-reject">已驳回</span>
            <span class="approval-storage">暂存</span>
          </div>
        </div>
        <!--鼠标划线显示编辑内容-->
        <div class="item-opts">
          <el-switch v-model=""></el-switch>
          <div class="item-opt-one">
            <el-button size="small" class="page-preview">预览</el-button>
            <el-button size="small" class="generate-template">生成模板</el-button>
          </div>
          <div class="item-opt-two">
            <el-tooltip class="item" content="编辑" placement="bottom">
              <a href="javascript:void(0)">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-edit"></use></svg>
              </a>
            </el-tooltip>
            <el-tooltip class="item" content="复制" placement="bottom">
              <a href="javascript:void(0)">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-copy"></use></svg>
              </a>
            </el-tooltip>
            <el-tooltip class="item" content="查看海报" placement="bottom">
              <a href="javascript:void(0)">
                <svg class="icon" aria-hidden="true"><use xlink:href="#icon-view"></use></svg>
              </a>
            </el-tooltip>
            <el-tooltip class="item item-del" content="删除" placement="bottom">
              <a href="javascript:void(0)">
                <i class="iconfont icon-delete"></i>
              </a>
            </el-tooltip>
          </div>
        </template>
      </template>
    </li>
  </ul>
  <div class="template-card-list-footer">
    <el-button>
      <svg class="icon" aria-hidden="true"><use xlink:href="#icon-add"></use></svg>
      加载更多
    </el-button>
  </div>
</div>
------------------------------------------------------------------------------------------------------------ */
.template-card-list-wrapper {
  .template-card-list-body {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 -2%;

    //新建页面
    .empty {
      .item-info {
        width: 100%;
        min-height: 198px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column
      }

      svg {
        margin: 15px 0;
      }

      a {
        display: block;
        height: 100%;
        border: 1px solid transparent;
        text-decoration: none;
        color: $--color-primary;
        font-size: $--font-size-base;
      }

      a:hover {
        border: 1px solid$--color-primary;
        background: $--color-primary-3
      }
    }

    li {
      position: relative;
      width: 16%;
      margin: 0 2% 40px 2%;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);

      img {
        width: 100%;
        height: 150px;
      }

      &:hover {
        .item-opts {
          display: block;
        }
      }

      .item-info {
        position: relative;

        //已上架 已下架
        .upper-shelf,
        .lower-shelf {
          position: absolute;
          left: 5%;
          top: 0;
          padding: 3px 10px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
          color: $--color-white;
        }

        .upper-shelf {
          background: $--color-primary;
        }

        .lower-shelf {
          background: $--color-warning;
        }

        .list-item-bom {
          margin-top: -4px;
          padding: 0 10px 10px 10px;
          box-shadow: 0 0 10px $--color-grayish-3;

          p {
            margin: 0;
            padding: 8px 0 15px 0;
            width: 98%;
            overflow: hidden;
            color: $--color-blue-light-1;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 3px;
          }

        }
      }

      .item-opts {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);

        &.other {
          .el-switch {
            .el-switch__core {
              &::before {
                content: "私有" !important;
              }
            }

            &.is-checked {
              .el-switch__core {
                &::before {
                  content: "公有" !important;
                }
              }
            }
          }
        }

        .el-switch {
          position: absolute;
          top: 13px;
          right: 15px;
          z-index: 99;
        }

        .el-switch .el-switch__core {
          width: 58px !important;
          height: 22px !important;
        }

        .el-switch__core {
          border-color: $--color-warning !important;
          background: $--color-warning !important;

          &::before {
            content: "下架";
            display: inline-block;
            width: 100%;
            height: 22px;
            color: $--color-white;
            font-size: $--font-size-extra-small;
            text-align: right;
            position: relative;
            right: 8px;
            font-size: $--font-size-extra-small;
            line-height: 22px;

          }
        }

        .is-checked {
          .el-switch__core {
            border-color: $--color-primary !important;
            background: $--color-primary !important;

            &::before {
              content: "上架";
              text-align: left;
              padding: 0 0 0 18px;

            }
          }
        }

        .el-switch__core:after {
          width: 22px;
          height: 22px;
        }

      }

      //预览和生成模板按钮
      .item-opt-one {
        position: absolute;
        top: 10%;
        width: 100%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .el-button {
          width: 60%;
          margin: 0 0 20px 0;
          color: $--color-white
        }

        .page-preview {
          border-color: $--color-success-1;
          background: $--color-success-1
        }

        .page-preview:hover {
          border-color: $--color-success-1-hover;
          background: $--color-success-1-hover
        }

        .generate-template {
          border-color: $--color-primary;
          background: $--color-primary
        }

        .generate-template:hover {
          border-color: $--color-primary;
          background: $--color-primary
        }
      }

      .item-opt-two {
        position: absolute;
        bottom: 10%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: row;

        a {
          width: 30px;
          height: 30px;
          margin: 0 5%;
          display: inline-block;
          border-radius: 20px;
          background: $--color-white;
          line-height: 30px;
          text-align: center;

          .icon-delete {
            font-size: $--font-size-extra-small;
            color: $--color-danger
          }
        }
      }
    }

    .group-status {
      display: flex;
      justify-content: space-between;
    }
  }

  .template-card-list-footer {
    width: 145px;
    margin: 0 auto 32px auto;

    .el-button {
      padding: 7px 40px;
      background: $--color-grayish-1;
      border-color: $--border-color-base;
      color: $--color-blue-light-1;
      font-size: $--font-size-extra-small;
    }

    .el-button:hover {
      background: $--color-primary-3;
      border-color: $--color-primary-2;
    }

    svg {
      width: 0.8em;
      height: 0.8em;
    }
  }
}

/* 信息标签

<el-tag class="template-info-group">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-info"></use>
  </svg>
  共搜索到<span>{{totalCount}}</span>条
</el-tag>
-----------------------------------------*/
.template-info-group {
  margin-top: 10px;
  padding: 0 20px;

  >span {
    padding: 0 10px 6px;
  }

  >.icon {
    margin-right: 8px;
    transform: scale(1.2);
    vertical-align: middle;
    fill: currentColor;
  }
}

/* 无遮罩层的模态框

<el-dialog class="template-dialog" title="标题">
  <el-form :model="form">
      <el-form-item label="表单项1：">
          <el-input disabled></el-input>
      </el-form-item>
      <el-form-item label="表单项2：">
          <el-input placeholder="请输入名称"></el-input>
      </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
      <el-button>取 消</el-button>
      <el-button type="primary">确 认</el-button>
  </div>
</el-dialog>
---------------------------------------------------------*/
.template-dialog {

  // 无遮罩层
  &__no-modal {
    .el-dialog {
      border: 1px solid $--border-color-base;
      box-shadow: 0 0 5px rgba($color: $--border-color-base, $alpha: .5)
    }
  }

  //头部
  .el-dialog__header {
    .el-dialog__title {
      font-size: 16px;
    }
  }

  //主体
  .el-dialog__body {

    padding: 20px 35px;

    .el-form {
      .el-form-item {
        margin-bottom: 15px;
      }
    }
  }

  //底部
  .el-dialog__footer {
    text-align: center;
  }
}

/* 管理页面布局组件
----------------------------------*/
.template-layout-block {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #e7e8ed;

  &__header {
    display: flex;
    margin-bottom: 20px;

    >h3 {
      color: $--color-text-primary;
      font-size: 16px;
      font-weight: normal;
      margin: 0;
      padding: 0;

      .el-button{
        margin-left: 15px;
      }
    }
  }

  &__body {
    &.is-has-header {
      height: calc(100% - 40px);
    }

    height: 100%;
    overflow: auto;
    background-color: $--color-white;
    border-radius: 3px;
    box-sizing: border-box;

    // box-shadow: 0 0 5px #eceef3;
    >.main {
      overflow: auto;
      height: 100%;
      box-sizing: border-box;
      padding: 0 20px;
    }

    >.sidebar-left,
    >.sidebar {
      float: left;
      width: 240px;
      height: 100%;
      position: relative;
      z-index: 1;
      // overflow-y: auto; //tree有操作图表组时被隐藏了
      padding: 20px 0;
      box-sizing: border-box;
      border-right: 1px solid $--border-color-base;
    }
  }
}

/* 伪选项卡（暂时不用）
----------------------------------*/
.template-fake-tabs {
  >li {
    display: inline-block;
    cursor: pointer;
    line-height: 1;
    font-family: 'PingFangSC-Regular', 'PingFang SC';

    &:hover {
      color: $--color-primary;
    }

    &.active {
      color: $--color-primary;
      font-weight: 400;

      &::before {
        content: '';
        display: table;
        width: 100%;
        position: relative;
        border-top-color: $--color-primary;
        border-top-style: solid;
      }
    }
  }

  &__normal {
    >li {
      font-size: 18px;
      margin-right: 40px;
      line-height: 30px;

      &.active {
        font-weight: 400;

        &::before {
          top: 32px;
          border-top-width: 2px;
        }
      }
    }
  }

  &__small {
    >li {
      font-size: 12px;
      margin-right: 20px;
      line-height: 24px;

      &.active {
        color: $--color-primary;
        font-weight: 400;

        &::before {
          top: 24px;
          border-top-width: 1px;
        }
      }
    }
  }
}

/* 表单模板
----------------------------------*/
.template-form {
  height: calc(100% - 60px);

  &__list {
    margin: 60px auto 0;
    width: 650px;
    min-height: calc(100% - 72px);
  }

  &__buttons {
    position: sticky;
    left: 20px;
    right: 20px;
    bottom: 0;
    z-index: 1;
    padding: 20px 0;
    text-align: center;
    background-color: $--color-white;
    border-top: 1px solid $--border-color-base;
    width: 100%;

    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

/* 信息块
--------------------------*/
.template-alert {
  margin-top: 20px;
  padding: 20px 20px 0 20px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid $--color-primary-2;
  background-color: $--color-primary-3;
  font-size: 12px;

  dt {
    float: left;
    margin-right: 10px;
    color: $--color-primary;

    i {
      margin-right: 10px;
      vertical-align: middle;
    }
  }

  dd {
    float: left;
    margin-top: 1px;
    color: $--color-text-grade-5;

    span {
      color: $--color-primary;
    }
  }
}

/* 无数据
--------------------------*/
.template-no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*-------------------
  新增或编辑经纪人页面
--------------------*/
.add-or-edit-borker {
  min-width: 1200px;
  overflow-x: auto;
  overflow-y: hidden;

  .upload {
    color: #5b73ff;
    font-size: 12px;

    i {
      margin: 0 5px;
    }
  }

  //upload样式
  .upload-demo {
    width: 100%;

    .el-upload--text {
      width: 100%;

      .el-upload-dragger {
        width: 100%;
        background-color: #fafafa;
      }
    }
  }

  .header-icon {
    text-align: center;
    background-color: #333;
    margin: 0;
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 48px;

    img {
      display: inline-block;
      margin-top: 12px;
    }
  }

  .header-container {
    padding: 10px 0;
    box-shadow: 0px 0px 5px #ebeef3;

    .header-title {
      display: inline-block;
      margin-left: 55px;
    }

    .step-button-enter,
    .step-button-leave-to {
      opacity: 0;
      transform: translateX(50px);
    }

    .step-button-leave-active {
      position: absolute;
    }

    .steps {
      float: right;
      width: 50%;

      .step-item {
        flex-basis: 50% !important;
        margin: 0;
      }
    }

    .header-button {
      text-align: right;
      padding-right: 20px;
    }

  }

  .template-layout-block {
    padding: 0;

    .el-form {
      width: 950px;
    }
  }

  .content-form {
    width: 50%;
    margin: 50px 0;
  }

  .showImg {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 150px;

    img {
      width: 145px;
      height: 100px;
    }

    .el-button {
      margin-top: 5px;
    }
  }

  .halfImg {
    img {
      width: 70px;
      height: 100px;
    }

    .el-button {
      min-width: 55px;
    }
  }

  .split-line {
    background-color: #ebeef3;
    height: 1px;
    margin: 20px 50px;
  }

  .form-body {
    margin: 20px 0;
    text-align: center;
  }

  .form-footer {
    text-align: center;

    button {
      transition: all 0.5s;
      margin-left: 20px !important;
    }
  }


  .el-select,
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }

  //修改会遮挡input框会被遮挡的问题
  .vue-treeselect div,
  .vue-treeselect span {
    box-sizing: content-box;
  }

  //修改宽度不同
  .vue-treeselect__control {
    width: 94%;
    padding-right: 10px;

    .vue-treeselect__placeholder {
      padding-left: 11px;
    }

    .vue-treeselect__input {
      padding-left: 10px;
      height: 99%;
      border: none !important;
    }
  }

  .div2 {
    .main {
      overflow: initial;
    }
  }

  .el-upload--picture-card {
    display: inline-block;
    height: 102px;

    .el-upload__text {
      height: 102px;
    }
  }

  .half-photo {
    .el-upload--picture-card {
      width: 73px;

      .el-upload__text {
        .el-button {
          min-width: 50px;
        }
      }
    }
  }
}

// 对公共页面小布局块样式的封装
.card-layout-block {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  background-color: $--color-white;
  box-shadow: 0 0 5px #eceef3;
  &__header {
      display: flex;
      > h3 {
        color: $--color-text-grade-1;
        font-size:$--font-size-large;
        font-weight: normal;
      }
      > .sidebar{
        margin-left:auto;
        .el-alert--info.is-light {
          height: 24px;
          line-height: 24px;
          .el-alert__title {
            font-size: $--font-size-small;
          }
        }
      }
  }
  &__body {
     padding-top:18px;
     height:calc(100% - 40px);
     overflow: auto;
     background-color:transparent;
    
  }
}

/*--------------
 app用户详情
---------------*/
.backtomain {
  text-decoration: none;
  margin-left: 15px;
  font-size: 12px;
  color: #5b73ff;
}

.view-title {
  margin-top: 20px;
  margin-bottom: 20px;
}

.app-user-form {
  width: 100%;
  margin: 0;

  .el-form-item__label {
    text-align: left;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  .el-form-item__content {
    font-size: 13px;
    color: #646c9a;
  }
}

.view-item {
  margin-top: 0;
}

/*-----------------
经纪人管理
------------------*/
.borker-manager {
  .vue-treeselect {
    height: 30px;

    .vue-treeselect__input {
      height: 25px;
      border: none !important;
    }
  }

  .search-input {
    width: 200px;
  }
   
  .item-left {
    width: 230px;
  }

  // .template-toolbar-group .item-right {
  //   dt {
  //     width: 100px;
  //   }
  // }

}

/*-----------------
 经纪人详情
------------------*/
.broker-detail {
  overflow-y: scroll !important;

  &-bottom {
    text-align: left;
    min-width: 1250px;

    .el-radio-group {
      margin: 0 80px;
    }

    .el-input {
      margin-right: 300px;
    }

    .bottom-title {
      font-size: 12px;
    }

  }

  .view-item {
    width: 100%;
  }

  .el-form-item__content {
    font-size: 13px;
    color: #646c9a;
  }

  .file-item {
    background-color: #fafafa;
    border: 1px solid #ebeef3;
    color: #646c9a;
    padding: 0 10px;

    img {
      position: relative;
      top: 1px;
      margin-right: 5px;
      width: 15px;
      height: 15px;
    }

    a {
      text-decoration: none;
      color: #5B73FF;
      font-size: 12px;
      float: right;
      margin-right: 20px;

      img {
        margin-right: 10px;
        top: 3px;
      }
    }
  }

  .file-item+.file-item {
    border-top: none;
  }

  .el-form-item {
    margin-bottom: 15px;
  }

  img {
    height: 130px;
    width: 170px;
  }

  /*--------------------
  审核
  发证查看详情额外样式
---------------------*/
  .test {
    margin-bottom: 19px;
  }

  .upload-title {
    color: #5b73ff;
    font-size: 12px;

    i {
      margin: 0 5px;
    }
  }

  .upload-file {
    width: 100%;

    .el-upload {
      width: 100%;

      .el-upload-dragger {
        width: 100%;
        background-color: #fafafa;
      }
    }
  }

  .contract {
    padding: 0 10px;
    background-color: #fafafa;
    width: 96%;
    color: #646c9a;
    font-size: 12px;
    border: 1px solid #ebeef3;

    img {
      position: relative;
      top: 1px;
      margin-right: 5px;
      width: 15px;
      height: 15px;
    }

    .el-icon-close {
      float: right;
      margin-top: 10px;
    }
  }
}

/*-------------
经纪人血缘
--------------*/
.blood-relation {
  &-title {
    float: left;
  }

  &-btn {
    float: right;
    z-index: 9999;

    .el-button {
      margin: 20px 20px;
    }
  }

  &-pic {
    margin-top: 50px;
    width: 100%;
    height: 400px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 10px;
  }

  &-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 10px;
  }

  .el-table {
    width: 100%;
  }
}

/*------------------
重置密码弹窗样式
--------------------*/
.reset-password {
  .template-layout-block {
    padding: 0;
  }

  .el-form {
    width: 100%;
    margin-top: 10px;
  }

  .el-dialog__body,
  .main {
    padding: 0;
  }

  .el-alert--warning.is-light {
    margin-bottom: 20px;
    height: 90px;
    border: none;
    background-color: #fff;
    justify-content: center;

    .el-alert__icon.is-big {
      font-size: 40px;
    }

    .el-alert__content {
      margin-left: 15px;

      .el-alert__title.is-bold {
        display: inline-block;
        margin-top: 35px;
        margin-bottom: 15px;
        color: #646c9a;
        font-size: 20px;
        font-weight: normal;
      }

      .el-alert__description {
        color: #a7abc3;
        font-size: 14px;
      }
    }
  }
}

/*--------------
编辑新增经纪人
--------------*/
.add-or-edit-borker {

  //身份证图片路径
  .el-upload--picture-card {
    .identity-front {
      background: url('../../../images/identity-front.svg') no-repeat;
    }

    .identity-verso {
      background: url('../../../images/identity-verso.svg') no-repeat;
    }
  }

  .half-photo {
    .el-upload--picture-card {
      .el-upload__text {
        background: url('../../../images/halfphoto.svg') no-repeat;
      }
    }
  }

  .el-upload-list__item {
    max-width: 100%;
    background-color: #fafafa;
    border: 1px solid #ebeef3;
    color: #646c9a;
    padding: 3px 10px;
    margin-top: 0;
    font-size: 14px;
  }

  .el-upload-list__item+.el-upload-list__item {
    border-top: none;
  }
}

/*-------------
分页器样式
--------------*/
.el-pagination {
  padding-bottom: 20px;
}


/*-------------
点的样式
---------------*/
.spot {
  display: inline-block;
  margin-right: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.main-table{
  margin-bottom: 75px;
}
/*--------------
  考试详情弹窗
---------------*/
.test {
  &-question {
    margin-bottom: 30px;

    &-title {
      margin-bottom: 10px;
    }
  }

  &-radio {
    width: 100%;

    &-item {
      padding-left: 20px;
      margin-bottom: 5px;
      border-radius: 3px;

      label {
        width: 100%;
        height: 30px;
        line-height: 30px;
        color: #646c9a;

        .is-checked {
          color: #646c9a;
        }

        .el-radio__label {
          color: #646c9a !important;
        }
      }

      &-option {
        padding-right: 5px;
      }
    }

    .right-class {
      background-color: #d4f2e9;
      border: 1px solid #b9eadb;

      .el-checkbox::after,
      .el-radio::after {
        float: right;
        padding-right: 15px;
        content: url('../../../images/u2786.svg');
        transform: scale(0.7);
      }
    }

    .wrong-class {
      background-color: #ffebed;
      border: 1px solid #ffb8b7;

      .el-checkbox::after,
      .el-radio::after {
        float: right;
        padding-right: 15px;
        content: url('../../../images/u2785.svg');
        transform: scale(0.7);
      }
    }
  }
}